import React from 'react';
import "@/styles/_cloudServer.scss";


import { CsCom, WcCom, CcCom, DcCom, ScCom } from './components';

class CloudServer extends React.Component<any, any>{
    constructor(props: any) {
        super(props);
        this.state = {
            currentUrl: this.props.match.params.code,
            csDatas: [
                {
                    title: "弹性购买",
                    code: "cs",
                    desc: `服务器基于规模资源池，
                    以虚拟化方式为客户提供多种规格的计算、存储和网络等资源服务，
                    用户可根据自己的需求弹性选择自己所属服务器的硬件配置，
                    随意部署自己的硬件及系统，
                    智能的控制面板可在线启动、停止、重置、重启、更换操作系统、定期智能备份、以及修改密码、监控资源使用情况等更多管理属性。`
                },
                {
                    title: "云计算业务合作",
                    code: "cc",
                    en: "CLOUD COMPUTING",
                    alias: "云计算",
                    desc: "云平台为您提供一种云计算解决方案，您可以拥有独立的云数据中心资源平台",
                },
                {
                    title: "数据中心资源",
                    code: "dc",
                    en: "DATA CENTER",
                    alias: "数据中心",
                    desc: "云平台为您提供全球数据中心资源，您可以快速享受IDC服务的中心资源平台，包括：西部数据中心、香港机房、美国机房....",
                },
                {
                    title: "服务器集群",
                    code: "sc",
                    en: "SERVER CLUSTER",
                    desc: "云平台为您提供一种云计算解决方案，您可以拥有独立的云数据中心资源平台"
                },
                {
                    title: "部署与管理",
                    code: "wc",
                    en: "WEB CONSOLE",
                    desc: "简单方便实现对资源的部署，包括：IDC数据中心 、 服务器集群 、 业务平台...",
                }
            ],
        };

    }
    // 监听路由变化
    componentDidUpdate(nextProps: any) {
        if (this.props.location !== nextProps.location) {
            this.setState({ currentUrl: this.props.match.params.code });
        }
    }
    render() {
        return (
            <div className={`cloudServer ${this.state.currentUrl}`}>
                <div className={`c-header ${this.state.currentUrl}`}>
                    <div className="common-width">
                        {this.state.csDatas.map((item: any, i: number) => {
                            if (this.state.currentUrl === item.code) {
                                return (
                                    <div key={i}>
                                        <h3>{item.code === "cs" ? "云服务器" : item.title}</h3>
                                        <div className="c-h-c">
                                            {item.desc}
                                        </div>
                                    </div>
                                )
                            }
                            else {
                                return ("")
                            }
                        })}
                        {/* <h3>
                            {this.state.currentUrl === "cs" ? `云服务器` : `公有云会像水、电一样服务于每个人的生活`}
                        </h3>
                        <div className="c-h-c">
                            {this.state.currentUrl === "cs" ? `
                                  服务器基于规模资源池，
                                  以虚拟化方式为客户提供多种规格的计算、存储和网络等资源服务，
                                  用户可根据自己的需求弹性选择自己所属服务器的硬件配置，
                                  随意部署自己的硬件及系统，
                                  智能的控制面板可在线启动、停止、重置、重启、更换操作系统、定期智能备份、以及修改密码、监控资源使用情况等更多管理属性。` :
                                `我们致力于提供一个平台，使计算资源的交付更加简单、高效、可靠，甚至更环保`
                            }
                        </div> */}
                    </div>
                </div>
                <div className="c-tab common-tabs">
                    <div className="common-width tabs-c">
                        {this.state.csDatas.map((item: any, inx: number) => {
                            return (
                                <span key={inx} style={{ width: `${100 / this.state.csDatas.length}%` }}
                                    className={`${this.state.currentUrl === item.code ? 'highlight' : ''}`}
                                    onClick={this.tabsChange.bind(this, item)}>
                                    {item.title}
                                </span>
                            )
                        })}
                    </div>
                </div>
                <div className={`${this.state.currentUrl === 'cs' ? 'common-width cs' : "other"}-content`}>
                    {this.state.currentUrl === "cs" ? <CsCom /> :
                        <div>
                            {this.state.csDatas.map((item: any, i: number) => {
                                if (item.code === this.state.currentUrl) {
                                    return (
                                        <div key={i}>
                                            <div className="page-title common-width">
                                                <div className="title-box">
                                                    {item.en}
                                                    <span>{item.alias ? item.alias : item.title}</span>
                                                </div>
                                                <p>{item.desc}</p>
                                            </div>
                                            <div className={`page-content`}>
                                                {(() => {
                                                    switch (item.code) {
                                                        case "cc": return <CcCom />
                                                        case "dc": return <DcCom />
                                                        case "sc": return <ScCom />
                                                        case "wc": return <WcCom />
                                                    }
                                                }
                                                )()}
                                            </div>
                                        </div>
                                    )
                                } else {
                                    return ("")
                                }
                            })}
                        </div>
                    }
                </div>
            </div>
        )
    }
    tabsChange(item: any) {
        if (this.state.currentUrl === item.code) return;
        this.props.history.push("/cloudServer/" + item.code);
    }

}
export default CloudServer;
